<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<!--检索组件-->
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-inline">
								<input type="text" name="bookname" id="bookname" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">ISBN</label>
							<div class="layui-input-inline">
								<input type="text" name="isbn" id="isbn" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="wirter" id="wirter" placeholder="" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-inline">
								<select  name="st" placeholder="" class="layui-input">
									<option value="0">有库存</option>
									<option value="1">已借出</option>
									</select>
							</div>
						</div>

						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="article-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--信息显示表格组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>
		<!--添加、修改表单组件-->
		<div style="display: none" id="showAdd">
			<form class="layui-form" action="">
				<input type="hidden" name="bid">
				<div class="mainBox">
					<div class="main-container">
						<div class="main-container">
							<div class="layui-form-item">
								<label class="layui-form-label">书名</label>
								<div class="layui-input-block">
									<input type="text" name="bookname" id="update_bookname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>

                            <input type="text" value="" id="id" name="id"  lay-verify="required"
                                   class="layui-input realName" style="display: none">

							<div class="layui-form-item">
								<label class="layui-form-label">ISBN</label>
								<div class="layui-input-block">
									<input type="text"  name="isbn" id="update_isbn" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">出版社</label>
								<div class="layui-input-block">
									<input type="text"  name="publish" id="update_publish" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">作者</label>
								<div class="layui-input-block">
									<input type="text"  name="wirter"  id="update_wirter" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">总数</label>
								<div class="layui-input-block">
									<input type="text"  name="number"  id="update_number" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">类别</label>
								<div class="layui-input-block">
									<select name="categary"  lay-filter="required" id="update_categary">
										<option value="计算机"> 计算机类</option>
										<option value="名著"> 名著类</option>
										<option value="政史"> 政史类</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">位置</label>
								<div class="layui-input-block">
									<select name="position"  lay-filter="required" id="update_position">
										<option value="一楼"> 一楼</option>
										<option value="二楼"> 二楼</option>
										<option value="政三楼史"> 三楼</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="button-container">
						<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="formDemo">
							<i class="layui-icon layui-icon-ok"></i>
							提交
						</button>
						<button type="reset" class="pear-btn pear-btn-sm">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>


		<div style="display: none" id="showAdds">
			<form class="layui-form" action="">
				<input type="hidden" name="bid">
				<div class="mainBox">
					<div class="main-container">
						<div class="main-container">
							<div class="layui-form-item" >
								<label class="layui-form-label">ID</label>
								<div class="layui-input-block">
									<input name="id" id="add_id" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">书名</label>
								<div class="layui-input-block">
									<input type="text" name="bookname" id="add_bookname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">ISBN</label>
								<div class="layui-input-block">
									<input type="text"  name="isbn" id="add_isbn" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">出版社</label>
								<div class="layui-input-block">
									<input type="text"  name="publish" id="add_publish" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">作者</label>
								<div class="layui-input-block">
									<input type="text"  name="wirter"  id="add_wirter" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">总数</label>
								<div class="layui-input-block">
									<input type="text"  name="number"  id="add_number" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">类别</label>
								<div class="layui-input-block">
									<select name="categary"  lay-filter="required" id="add_categary">
										<option value="计算机"> 计算机类</option>
										<option value="名著"> 名著类</option>
										<option value="政史"> 政史类</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">位置</label>
								<div class="layui-input-block">
									<select name="position"  lay-filter="required" id="add_position">
										<option value="一楼"> 一楼</option>
										<option value="二楼"> 二楼</option>
										<option value="政三楼史"> 三楼</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="button-container">
						<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="formDemo">
							<i class="layui-icon layui-icon-ok"></i>
							提交
						</button>
						<button type="reset" class="pear-btn pear-btn-sm">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>

		<!--新增，批量删除组件-->
		<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        添加新书
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        批量删除
		    </button>
		</script>
<!--修改删除组件-->
		<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common'], function() {


				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
				let MODULE_PATH = "operate/";

				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: '书名',
							field: 'bookname',
                            align: 'center'
						},
						{
							title: 'ISBN',
							field: 'isbn',
                            align: 'center'
						},
						{
							title: '出版社',
							field: 'publish',
                            align: 'center'
							//templet: '#user-sex'
						},
						{
							title: '类别',
							field: 'categary',
                            align: 'center'
						},
						{
							title: '作者',
							field: 'wirter',
                            align: 'center'
						},
						{
							title: '位置信息',
							field: 'position',
                            align: 'center'
						},
						{
							title: '总数量',
							field: 'number',
                            align: 'center'
						},
						{
							title: '剩余数量',
							field: 'surplus',
                            align: 'center'
						},

						{
							title: '操作',
							toolbar: '#user-bar',
                            align: 'center'
						}
					]

				]


				//查找监控提交
				form.on('submit(article-query)', function (data) {
					// console.log(created);
					data.field.page=1;
					data.field.limit=5;
					$.ajax({
						url: "http://localhost/getlist3",
						data: data.field,
						dataType: "json",
						type: "GET",

						success: function (d) {
							table.reload('user-table', {
								where: { //设定异步数据接口的额外参数，任意设
									bookname: data.field.bookname
									, isbn: data.field.isbn
									, wirter: data.field.wirter
								}
								, page: {
									curr: 1 //重新从第 1 页开始
								}
							}); //只重载数据
						}
					})

					console.log(data.field)
					// layer.alert(JSON.stringify(data.field), {
					//     title: '最终的提交信息'
					// })
					return false;
				});

				table.render({
					elem: '#user-table',
					url: 'http://localhost/getlist9',
					page: true,
					cols: cols,
					skin: 'line',
					limit:2,
					limits:[2,4,6,8,10],
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(user-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(user-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(user-query)', function(data) {
					table.reload('user-table', {
						where: data.field
					})
					return false;
				});

				form.on('switch(user-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});



				window.add = function() {
					var data = data //获得当前行数据
							,layEvent = event; //获得 lay-event 对应的值
					var form = layui.form;
					layer.open({
						type: 1,
						title: '文章添加',
						area: ['500px', '500px'],
						anim: 5,
						resize: false,
						content: $("#showAdds")
					});
                    form.on('submit(formDemo)', function(data){
						$.ajax({
							url:"http://localhost/insert3",
							data:data.field,
							dataType:"json",
							type:"POST",
							success:function (d) {
								document.getElementById("msg").innerText=d.msg

								window.location.href="/abc"

							}
						})
                    });
				}


				window.edit = function(obj) {
					var data = obj.data //获得当前行数据
							,layEvent = obj.event; //获得 lay-event 对应的值
					var form = layui.form;
					//$.get(totalUrl+'selectOne', {uid:obj.data.uid}, function(obj1){
					$.post('http://localhost/tanchuid3/'+data.id,{}, function(str){
						layer.open({
							type: 1,
							title: '文章修改',
							area: ['500px', '600px'],
							anim: 5,
							resize:false,
							// offset:'t',
							//content: "内容:"+str.data.content //注意，如果str是object，那么需要字符拼接。
							content: $('#showAdd')
						});


						$("#update_bookname").val(str.data.bookname)
						$("#update_isbn").val(str.data.isbn)
						$("#update_publish").val(str.data.publish)
                        $("#id").val(str.data.id)
						$("#update_position").val(str.data.position)
						$("#update_number").val(str.data.number)
						$("#update_wirter").val(str.data.wirter)
						$("#update_categary").val(str.data.categary)
						form.render();

					});
					form.on('submit(formDemo)', function(data){
						$.ajax({
							url:"http://localhost/update3",
							data:data.field,
							dataType:"json",
							type:"POST",
							success:function (d) {
								document.getElementById("msg").innerText=d.msg

								window.location.href="/abc"

							}
						})

					});
				}

				window.remove = function(obj) {
					var data = obj.data //获得当前行数据
							,layEvent = obj.event; //获得 lay-event 对应的值
					var form = layui.form;
					layer.confirm('真的删除行么', function (index) {
						$ = layui.jquery
						$.ajax({
							url: "http://localhost/delete3",
							data: {"id": data.id},
							datatype: "json",
							type: "GET",
						})
						obj.del(); //删除对应行（tr）的DOM结构
						layer.close(index);
						//向服务端发送删除指令
					});
				}

				window.batchRemove = function(obj) {

					var checkStatus = table.checkStatus(obj.config.id)
							,data = checkStatus.data; //获取选中的数据
					if (data.length === 0) {
						layer.msg('请选择一行');
					} else {
						var arr = new Array();
						for (var i = 0; i < checkStatus.data.length; i++) {
							arr.push(checkStatus.data[i].id);
						}
						$.ajax({
							url: 'http://localhost/Bydelete3'
							, data: {"ids": arr}
							, traditional: true  //如果向后台传输数组或者list的对象的时候要深度序列化
							, success: function (z) {
								if (z.data > 0) {
									table.reload('user-table')
								}
							}

						})
					}
				}

				window.refresh = function(param) {
					table.reload('user-table');
				}
			})
		</script>
	</body>
</html>
